<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>裁剪</title>
</head>
<th:block th:include="include :: footer" />
<th:block th:include="include :: ele-vue"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<style>
    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        cursor: pointer;
        background-color: aquamarine;
        width: 100%;
        height: 100%;
        margin-top: 0%;
    }
</style>
<body>
    <div id="nccj">
     <!--  <el-row>
           <table>
               <tr>
                   <td>左下角经度：</td><td style="width: 100px"><el-slider v-model="zxj" :min="-180" :max="180" @change="mapzs"></el-slider></td><td><el-input-number v-model="zxj" :min="-180" :max="180"  @change="mapzs"></el-input-number></td>
                   <td>左下角纬度：</td><td style="width: 100px"><el-slider v-model="zxw" :min="-90" :max="90" @change="mapzs"></el-slider></td><td><el-input-number v-model="zxw" :min="-90" :max="90"  @change="mapzs"></el-input-number></td>
               </tr>

               <tr>
                   <td>右上角经度：</td><td style="width: 100px"><el-slider v-model="ysj" :min="-180" :max="180" @change="mapzs"></el-slider></td><td><el-input-number v-model="ysj" :min="-180" :max="180"  @change="mapzs"></el-input-number></td>
                   <td>右上角纬度：</td><td style="width: 100px"><el-slider v-model="ysw" :min="-90" :max="90" @change="mapzs"></el-slider></td><td><el-input-number v-model="ysw" :min="-90" :max="90"  @change="mapzs"></el-input-number></td>
               </tr>
               <tr>
                   <td>选择属性:</td><td><el-select v-model="sxvalue" placeholder="请选择">
                   <el-option
                           v-for="item in sx"
                           :key="item.name"
                           :label="item.name"
                           :value="item.name">
                   </el-option>
               </el-select></td><td><button @click="xz" class="el-button el-button&#45;&#45;primary" style="float: right;">下载</button></td>
               </tr>
           </table>
        </el-row>-->
        <div id="map"></div>
    </div>
</body>
<script>
    var zxx = "[[${zxx}]]";
    var ysx = "[[${ysx}]]";
    var zxy = "[[${zxy}]]";
    var ysy = "[[${ysy}]]";
    new Vue({
        // 控制的标签容器
        el: '#nccj',
        // 交互的数据
        data() {
            return {
                map:null,
                bounds:null,
                bj:null,
                zxj: 0,
                zxw:0,
                ysj:0,
                ysw:0,
                sx:[],
                sxvalue:''
            }
        },
        mounted() {
            this.map = L.map('map',{
                // center: new L.LatLng(25.6586, 116),
                zoom: 4,
            })
            this.zxj = zxx;
            this.zxw = zxy;
            this.ysj = ysx;
            this.ysw = ysy;
            // 添加地图层
            // 使用高德的WMS服务
            var layer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
                subdomains: ['1', '2', '3', '4'],
                minZoom: 1, // 最小放缩级别
                maxZoom: 19 // 最大放缩级别
            });
            this.map.addLayer(layer);
            //this.getsx();
            this.mapzs();
        },
        methods: {
           /* xz(){
                if(this.sxvalue!=''){
                    var prefix = "/leaflet/map";
                    this.$confirm('是否下载?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.location.href = prefix+"/getxz"+"/"+this.zxj+"/"+this.zxw+"/"+this.ysj+"/"+this.ysw+"/"+fileid+"/"+this.sxvalue
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });

                }else{
                    this.$alert('属性不能为空', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: "选择属性"
                            });
                        }
                    });
                }
            },
            getsx(){
                that = this;
                var prefix = "/leaflet/map";
                $.post(prefix+"/getsxym",{fileid:fileid},function (data){
                    console.log(data);
                    that.sx = data.data
                    if(data.code == 500){
                        that.$notify({
                            title: '提示',
                            message: '未找到可用图层'
                        });
                    }
                })
            },*/
            mapzs(){
                //console.log(fileid)
                if(this.bj != null){
                    this.map.removeLayer(this.bj);
                }
                // console.log(data.data)
                var zxj = this.zxj;
                var ysj = this.ysj;
                var zxw = this.zxw;
                var ysw = this.ysw;
                // 创建一个LatLngBounds对象，表示你想要设置颜色的区域
                /*this.bounds = new L.LatLngBounds(
                    new L.LatLng(ysy, ysx), // 左下角
                    new L.LatLng(zxx, zxy), // 右上角
                    new L.LatLng(zxy,zxx), // 左下角
                    new L.LatLng(ysy, ysx)  // 右上角
                );*/
                this.bounds = new L.LatLngBounds(
                    new L.LatLng(zxw, zxj), // 左下角
                    new L.LatLng(ysw, ysj), // 右上角
                );

                // 在bounds区域上绘制一个矩形图层，并设置样式
               this.bj = L.rectangle(this.bounds, { color: "#ff7800", weight: 1 }).addTo(this.map);
                // 确保视图适应新添加的矩形图层
                this.map.fitBounds(this.bounds);
            }
        }
    })
</script>
</html>